<template>
	<view class="loadmore" v-if="show">
		<view class="loadmore-content u-flex-center" :style="{paddingTop:top,paddingBottom:bottom}"
			@click="$emit('moreClick')">
			<u-loading-icon mode="circle" :size="iconSize" v-if="status == 2" color="color"></u-loading-icon>
			<view class="loadmore-text" :style="{fontSize:fontSize,color:color}" @click="loadingClick">
				{{status == 1?loadmoreText:(status == 2?loadingText:nomoreText)}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "loadmore",
		data() {
			return {};
		},
		// 此处定义传入的参数
		props: {
			show: {
				type: Boolean,
				default: true,
			},
			// status 1-上滑加载  2-加载中 3-没有更多
			status: {
				type: Number,
				default: 1
			},
			loadmoreText: {
				type: String,
				default: '上滑加载',
			},
			loadingText: {
				type: String,
				default: '努力加载中',
			},
			nomoreText: {
				type: String,
				default: '没有更多了',
			},
			iconSize: {
				type: [String, Number],
				default: '26rpx',
			},
			fontSize: {
				type: String,
				default: '24rpx',
			},
			top: {
				type: String,
				default: '20rpx',
			},
			bottom: {
				type: String,
				default: '20rpx',
			},
			color: {
				type: String,
				default: '#abaeb5',
			}
		},
		watch: {},
		mounted() {},
		methods: {
			loadingClick() {
				this.$emit('loadingClick')
			}
		}
	}
</script>
<style lang="scss">
	.loadmore-content {}

	.loadmore-text {
		color: #abaeb5;
		padding-left: 20rpx;
	}
</style>